<template>
  <div>
    <div
      v-on:mouseenter="addMouseEnter"
      v-on:mouseleave="addMouseLeave"
      class="banner"
    >
      <div class="image-box">
        <ul
          v-on:transitionend="myTransitionEnd"
          v-bind:style="`transform:translateX(${distanceX}px);transition:${
            flag == true ? v1 : v2
          };`"
        >
          <li v-for="item, index in bannerData" :key="item.id">
            <a href="#"><img :src="item.src" alt="" /></a>
          </li>

          <!-- 追加一张图片 -->
          <li>
            <a href="#"><img :src="bannerData[0].src" alt="" /></a>
          </li>
        </ul>
      </div>
      <div class="point-box">
        <ol>
          <li
            v-for="(item, index) in bannerData"
            v-on:click="addClick(index)"
            v-bind:class="square == index ? 'active' : ''"
            v-bind:key="item.id"
          ></li>
        </ol>
      </div>
    </div>
  </div>
</template>
<style scoped>
.banner {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.image-box {
  width: 100%;
  height: 160px;
}
.image-box ul {
 width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  transform: translateX(0px);
  /* transition: none; */
}
.image-box ul li {
  flex-basis: 450px;
  flex-shrink: 0;
  text-align: center;
  font-size: 50px;
}
.image-box ul li:nth-of-type(1) {
  background-color: deepskyblue;
}
.image-box ul li:nth-of-type(2) {
  background-color: darkblue;
}
.image-box ul li:nth-of-type(3) {
  background-color: darkred;
}
.image-box ul li:nth-of-type(4) {
  background-color: lightgreen;
}
.image-box ul li:nth-of-type(5) {
  background-color: yellowgreen;
}
.image-box ul li:nth-of-type(6) {
  background-color: deepskyblue;
}
.image-box ul li img {
  width: 100%;
  vertical-align: middle;
}
.point-box {
  width:100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
.point-box ol {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.point-box ol li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
  /* border-radius: 50%; */
}
.point-box ol li.active {
  background-color: #f00;
}
</style>
<script>
export default {
    name:'myBanner2',
     data() {
        // 组件添加
        return {
          index: 0, // 图索引值
          square: 0, // 点索引值
          width: 450, //每个图的大小
          v1: "transform .5s", // 添加过渡
          v2: "none", // 移除过渡
          flag: true, // 用户切换过渡的标记
          distanceX: 0, //ul的位置
          timer: null, //记录定时器
          bannerData: [
            {
                src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzk.vmvjdtmf.cn%2Fueditor%2Fphp%2Fupload%2Fimage%2F20200409%2F1586399115850902.jpg&refer=http%3A%2F%2Fzk.vmvjdtmf.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638434822&t=e5af3bc3d1cea865ef735aa7a65bf53e',
            //   src: "../assets/img/banner1.png",
              id: "xxx1",
            },
            {
                 src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Foss.gzdaily.cn%2Fsite2%2Fpad%2Fpic%2F2020-02%2F04%2Fb4d752a5-a886-4454-bbd0-d0236d158567.jpg&refer=http%3A%2F%2Foss.gzdaily.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638434888&t=930ff6a7a3ffdf410fdc27262f6db2a6",
              id: "xxx2",
            },
            {
                src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcrawl.ws.126.net%2Fimg%2Fb97bc883e54040dab37852cc8bf3f743.jpg&refer=http%3A%2F%2Fcrawl.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638434953&t=0d92b452cc200368371070222c97d4e7",
              id: "xxx3",
            },
          ],
          len: 3,
        };
      },
      methods: {
        myInit() {
          // 执行定时器函数
          this.timer = setInterval(() => {
            this.autoPlay();
          }, 2000);
        },
        autoPlay() {
          // 计算ul的位置
          this.index++;
          this.distanceX = -this.index * this.width;
          this.flag = true;

          // 设置导航点高亮
          this.square++;
          if (this.square > this.len - 1) {
            this.square = 0;
          }
        },
        addMouseEnter() {
          clearInterval(this.timer);
        },
        addMouseLeave() {
          clearInterval(this.timer);
          this.timer = setInterval(() => {
            this.autoPlay();
          }, 1500);
        },
        addClick(i) {
          // console.log(i);// 当前点击的导航点的索引值
          this.flag = true;
          this.index = i; //赋值给图片索引值
          this.square = i; //赋值给导航点索引值
          this.distanceX = -this.index * this.width; //计算动画的位置
        },
        // 这个监听过渡结束的事件
        myTransitionEnd() {
          // console.log("图片索引值:",this.index);
          if (this.index >= this.len) {
            //判断是否动画切换至最后一个li标签
            this.index = 0; // 设置索引值
            this.flag = false; //移除过渡
            this.distanceX = 0; // ul标签瞬间回到0的位置
          }
        },
      },
      mounted() {
        this.myInit();
      },
    }
</script>